<template>
      <div class="app-app-menu">
          <van-panel :title="title">
          <van-grid :column-num="4">
            <van-grid-item
              v-for="value in menus"
              :key="value.id"
              :id="value.id"
              :icon="value.icon?value.icon:'photo-o'"
              :text="value.text"
              @click="menuClick(value.name)"
            />
          </van-grid>
        </van-panel>
      </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorator';

@Component({
    components: {
    }
})
export default class AppMenu extends Vue {

        /**
         * 名称
         *
         * @type {string}
         * @memberof AppMenu
         */
        @Prop() public title?: string;


        /**
         * 菜单数据
         *
         * @type {Array<any>}
         * @memberof AppMenu
         */
        @Prop() public menus?:Array<any>;

        /**
         * 菜单点击事件
         *
         * @memberof AppMenu
         */
        public menuClick($event:any){
            this.$emit('menuClick',$event);
        }
    
}
</script>

<style lang="less">
.app-app-menu{
    .van-cell__title {
        text-align: left;
    }
}

</style>